
function tecla(n)
{
	switch(n)
	{
		case "Cancelar":
			divKeyBoard = document.getElementById("KeyBoard");
			divKeyBoard.className ="divKeyBoardHidden";
			divKeyBoard.innerHTML = "";
		break;
		
		case "Limpiar":	
			document.getElementById("kPantalla").value = "";
		break;
		
		case "<--":
			tamano = document.getElementById("kPantalla").value.length;
			document.getElementById("kPantalla").value = document.getElementById("kPantalla").value.substr(0,tamano-1);
		break;
		
		default:
			document.getElementById("kPantalla").value += n;
			document.getElementById("kPantalla").focus();
		break;
	}

	
}


var nv = true;

function onScreenNumKeyBoard(btnProtagonista)
{
	divKeyBoard = document.getElementById("KeyBoard");
	divKeyBoard.className ="divCortina";
	divKeyBoard.innerHTML = "";
	
	var data=getWindowData();


	var kPantalla = document.createElement('input');
	kPantalla.setAttribute("type", btnProtagonista.type);
	kPantalla.setAttribute("value", btnProtagonista.value);
	kPantalla.setAttribute("id", "kPantalla");
	kPantalla.className = "teclado";
    kPantalla.style.width="150px";
	
	
	var kLimpiar = document.createElement('input');
	kLimpiar.setAttribute("type", "button");
	kLimpiar.setAttribute("value", "Limpiar");
	kLimpiar.className = "tecladoWide";
	kLimpiar.onclick = function () {tecla(this.value)} 
	
	var k1 = document.createElement('input');
	k1.setAttribute("type", "button");
	k1.setAttribute("value", "1");
	k1.setAttribute("id", "btn1");
	k1.onclick = function () {tecla(this.value)} 
	k1.className = "teclado";


	var k2 = document.createElement('input');
	k2.setAttribute("type", "button");
	k2.setAttribute("value", "2");
	k2.setAttribute("id", "btn2");
	k2.onclick = function () {tecla(this.value)}
	k2.className = "teclado";

	var k3 = document.createElement('input');
	k3.setAttribute("type", "button");
	k3.setAttribute("value", "3");
	k3.setAttribute("id", "btn3");
	k3.onclick = function () {tecla(this.value)}
	k3.className = "teclado";

	var k4 = document.createElement('input');
	k4.setAttribute("type", "button");
	k4.setAttribute("value", "4");
	k4.setAttribute("id", "btn4");
	k4.onclick = function () {tecla(this.value)}
	k4.className = "teclado";
	
	var k5 = document.createElement('input');
	k5.setAttribute("type", "button");
	k5.setAttribute("value", "5");
	k5.setAttribute("id", "btn5");
	k5.onclick = function () {tecla(this.value)}
	k5.className = "teclado";

	var k6 = document.createElement('input');
	k6.setAttribute("type", "button");
	k6.setAttribute("value", "6");
	k6.setAttribute("id", "btn6");
	k6.onclick = function () {tecla(this.value)}
	k6.className = "teclado";

	var k7 = document.createElement('input');
	k7.setAttribute("type", "button");
	k7.setAttribute("value", "7");
	k7.setAttribute("id", "btn7");
	k7.onclick = function () {tecla(this.value)}
	k7.className = "teclado";

	var k8 = document.createElement('input');
	k8.setAttribute("type", "button");
	k8.setAttribute("value", "8");
	k8.setAttribute("id", "btn8");
	k8.onclick = function () {tecla(this.value)}
	k8.className = "teclado";

	var k9 = document.createElement('input');
	k9.setAttribute("type", "button");
	k9.setAttribute("value", "9");
	k9.setAttribute("id", "btn9");
	k9.onclick = function () {tecla(this.value)}
	k9.className = "teclado";

	var k0 = document.createElement('input');
	k0.setAttribute("type", "button");
	k0.setAttribute("value", "0");
	k0.setAttribute("id", "btn0");
	k0.onclick = function () {tecla(this.value)}
	k0.className = "teclado";
	

	var kdelete = document.createElement('input');
	kdelete.setAttribute("type", "button");
	kdelete.setAttribute("value", "<--");
	kdelete.setAttribute("id", "btnDelete");
	kdelete.onclick = function () {tecla(this.value)}
	kdelete.className = "teclado";	
	
	
	kok = document.createElement('input');
	kok.setAttribute("type", "button");
	kok.setAttribute("value", "Aceptar");
	kok.setAttribute("class", "tecladoWide");  
	kok.onclick = function () {
		btnProtagonista.value = document.getElementById("kPantalla").value;
		divKeyBoard.className ="divKeyBoardHidden";
		divKeyBoard.innerHTML = "";
	}

	kcancel = document.createElement('input');
	kcancel.setAttribute("type", "button");
	kcancel.setAttribute("value", "Cancelar");
	kcancel.setAttribute("id", "btnCancel");
	kcancel.setAttribute("class", "tecladoWide"); 
	kcancel.onclick = function () {tecla(this.value)}
	
	 var divInterior = document.createElement('div');
	 
	 var br = document.createElement('br');
	var br1 = document.createElement('br');
	var br2 = document.createElement('br');
	var br3 = document.createElement('br');
	var br4 = document.createElement('br');
	var br5 = document.createElement('br');
	
	divInterior.className ="divKeyBoard";
	
	divInterior.appendChild(kPantalla);
	divInterior.appendChild(kdelete);
    divInterior.appendChild(br);
    divInterior.appendChild(k1);
    divInterior.appendChild(k2);
    divInterior.appendChild(k3);
	divInterior.appendChild(br1);
    divInterior.appendChild(k4);
    divInterior.appendChild(k5);
    divInterior.appendChild(k6);
	divInterior.appendChild(br2);
    divInterior.appendChild(k7);
    divInterior.appendChild(k8);
    divInterior.appendChild(k9);
	divInterior.appendChild(br3);
	divInterior.appendChild(kok);
    divInterior.appendChild(k0);
	divInterior.appendChild(kcancel);
	divInterior.appendChild(br4);
	
	
    
	

    divKeyBoard.appendChild(divInterior); 					// - put the table into the div
	
	
	
	//divKeyBoard.style.left=data[0]/2+data[2]-parseInt(divKeyBoard.style.width)/2+'px';
	divKeyBoard.style.left='200px';
	divKeyBoard.style.top=((data[1]/2+data[3])-(divKeyBoard.style.height)-300)+'px';
	document.getElementById("kPantalla").focus();

}

function onScreenKeyBoard(btnProtagonista)
{


	   
	divKeyBoard = document.getElementById("KeyBoard");
	divKeyBoard.className ="divCortina";
	divKeyBoard.innerHTML = "";
	
	var data=getWindowData();


	var kPantalla = document.createElement('input');
	kPantalla.setAttribute("type", btnProtagonista.type);
	kPantalla.setAttribute("value", btnProtagonista.value);
	kPantalla.setAttribute("id", "kPantalla");
	kPantalla.className = "teclado";
    kPantalla.style.width="400px";
	
	
	var kLimpiar = document.createElement('input');
	kLimpiar.setAttribute("type", "button");
	kLimpiar.setAttribute("value", "Limpiar");
	kLimpiar.className = "tecladoWide";
	kLimpiar.onclick = function () {tecla(this.value)} 
	
	var k1 = document.createElement('input');
	k1.setAttribute("type", "button");
	k1.setAttribute("value", "1");
	k1.setAttribute("id", "btn1");
	k1.onclick = function () {tecla(this.value)} 
	k1.className = "teclado";


	var k2 = document.createElement('input');
	k2.setAttribute("type", "button");
	k2.setAttribute("value", "2");
	k2.setAttribute("id", "btn2");
	k2.onclick = function () {tecla(this.value)}
	k2.className = "teclado";

	var k3 = document.createElement('input');
	k3.setAttribute("type", "button");
	k3.setAttribute("value", "3");
	k3.setAttribute("id", "btn3");
	k3.onclick = function () {tecla(this.value)}
	k3.className = "teclado";

	var k4 = document.createElement('input');
	k4.setAttribute("type", "button");
	k4.setAttribute("value", "4");
	k4.setAttribute("id", "btn4");
	k4.onclick = function () {tecla(this.value)}
	k4.className = "teclado";
	
	var k5 = document.createElement('input');
	k5.setAttribute("type", "button");
	k5.setAttribute("value", "5");
	k5.setAttribute("id", "btn5");
	k5.onclick = function () {tecla(this.value)}
	k5.className = "teclado";

	var k6 = document.createElement('input');
	k6.setAttribute("type", "button");
	k6.setAttribute("value", "6");
	k6.setAttribute("id", "btn6");
	k6.onclick = function () {tecla(this.value)}
	k6.className = "teclado";

	var k7 = document.createElement('input');
	k7.setAttribute("type", "button");
	k7.setAttribute("value", "7");
	k7.setAttribute("id", "btn7");
	k7.onclick = function () {tecla(this.value)}
	k7.className = "teclado";

	var k8 = document.createElement('input');
	k8.setAttribute("type", "button");
	k8.setAttribute("value", "8");
	k8.setAttribute("id", "btn8");
	k8.onclick = function () {tecla(this.value)}
	k8.className = "teclado";

	var k9 = document.createElement('input');
	k9.setAttribute("type", "button");
	k9.setAttribute("value", "9");
	k9.setAttribute("id", "btn9");
	k9.onclick = function () {tecla(this.value)}
	k9.className = "teclado";

	var k0 = document.createElement('input');
	k0.setAttribute("type", "button");
	k0.setAttribute("value", "0");
	k0.setAttribute("id", "btn0");
	k0.onclick = function () {tecla(this.value)}
	k0.className = "teclado";

	var kdelete = document.createElement('input');
	kdelete.setAttribute("type", "button");
	kdelete.setAttribute("value", "<--");
	kdelete.setAttribute("id", "btnDelete");
	kdelete.onclick = function () {tecla(this.value)}
	kdelete.className = "teclado";

	var kq = document.createElement('input');
	kq.setAttribute("type", "button");
	kq.setAttribute("value", "Q");
	kq.setAttribute("id", "btnQ");
	kq.onclick = function () {tecla(this.value)}
	kq.className = "teclado";

	var kw = document.createElement('input');
	kw.setAttribute("type", "button");
	kw.setAttribute("value", "W");
	kw.setAttribute("id", "btnW");
	kw.onclick = function () {tecla(this.value)}
	kw.className = "teclado";

	var ke = document.createElement('input');
	ke.setAttribute("type", "button");
	ke.setAttribute("value", "E");
	ke.setAttribute("id", "btnE");
	ke.onclick = function () {tecla(this.value)}
	ke.className = "teclado";
	
	var kr = document.createElement('input');
	kr.setAttribute("type", "button");
	kr.setAttribute("value", "R");
	kr.setAttribute("id", "btnR");
	kr.onclick = function () {tecla(this.value)}
	kr.className = "teclado";

	var kt = document.createElement('input');
	kt.setAttribute("type", "button");
	kt.setAttribute("value", "T");
	kt.onclick = function () {tecla(this.value)}
	kt.className = "teclado";

	var ky = document.createElement('input');
	ky.setAttribute("type", "button");
	ky.setAttribute("value", "Y");
	ky.onclick = function () {tecla(this.value)}
	ky.className = "teclado";

	var ku = document.createElement('input');
	ku.setAttribute("type", "button");
	ku.setAttribute("value", "U");
	ku.onclick = function () {tecla(this.value)}
	ku.className = "teclado";

	var ki = document.createElement('input');
	ki.setAttribute("type", "button");
	ki.setAttribute("value", "I");
	ki.onclick = function () {tecla(this.value)}
	ki.className = "teclado";

	var ko = document.createElement('input');
	ko.setAttribute("type", "button");
	ko.setAttribute("value", "O");
	ko.onclick = function () {tecla(this.value)}
	ko.className = "teclado";

	var kp = document.createElement('input');
	kp.setAttribute("type", "button");
	kp.setAttribute("value", "P");
	kp.onclick = function () {tecla(this.value)}
	kp.className = "teclado";

	var ka = document.createElement('input');
	ka.setAttribute('type', 'button');
	ka.setAttribute('value', 'A');
	ka.onclick = function () {tecla(this.value)}
	ka.className = "teclado";

	var ks = document.createElement('input');
	ks.setAttribute('type', 'button');
	ks.setAttribute('value', 'S');
	ks.onclick = function () {tecla(this.value)}
	ks.className = "teclado";

	var kd = document.createElement('input');
	kd.setAttribute('type', 'button');
	kd.setAttribute('value', 'D');
	kd.onclick = function () {tecla(this.value)}
	kd.className = "teclado";

	var kf = document.createElement('input');
	kf.setAttribute('type', 'button');
	kf.setAttribute('value', 'F');
	kf.onclick = function () {tecla(this.value)}
	kf.className = "teclado";

	var kg = document.createElement('input');
	kg.setAttribute('type', 'button');
	kg.setAttribute('value', 'G');
	kg.onclick = function () {tecla(this.value)}
	kg.className = "teclado";

	var kh = document.createElement('input');
	kh.setAttribute('type', 'button');
	kh.setAttribute('value', 'H');
	kh.onclick = function () {tecla(this.value)}
	kh.className = "teclado";

	var kj = document.createElement('input');
	kj.setAttribute('type', 'button');
	kj.setAttribute('value', 'J');
	kj.onclick = function () {tecla(this.value)}
	kj.className = "teclado";

	var kk = document.createElement('input');
	kk.setAttribute('type', 'button');
	kk.setAttribute('value', 'K');
	kk.onclick = function () {tecla(this.value)}
	kk.className = "teclado";

	var kl = document.createElement('input');
	kl.setAttribute('type', 'button');
	kl.setAttribute('value', 'L');
	kl.onclick = function () {tecla(this.value)}
	kl.className = "teclado";

	var kz = document.createElement('input');
	kz.setAttribute('type', 'button');
	kz.setAttribute('value', 'Z');
	kz.onclick = function () {tecla(this.value)}
	kz.className = "teclado";

	var kx = document.createElement('input');
	kx.setAttribute('type', 'button');
	kx.setAttribute('value', 'X');
	kx.onclick = function () {tecla(this.value)}
	kx.className = "teclado";

	var kc = document.createElement('input');
	kc.setAttribute('type', 'button');
	kc.setAttribute('value', 'C');
	kc.onclick = function () {tecla(this.value)}
	kc.className = "teclado";

	var kv = document.createElement('input');
	kv.setAttribute('type', 'button');
	kv.setAttribute('value', 'V');
	kv.onclick = function () {tecla(this.value)}
	kv.className = "teclado";

	var kb = document.createElement('input');
	kb.setAttribute('type', 'button');
	kb.setAttribute('value', 'B');
	kb.onclick = function () {tecla(this.value)}
	kb.className = "teclado";

	var kn = document.createElement('input');
	kn.setAttribute('type', 'button');
	kn.setAttribute('value', 'N');
	kn.onclick = function () {tecla(this.value)}
	kn.className = "teclado";

	var km = document.createElement('input');
	km.setAttribute('type', 'button');
	km.setAttribute('value', 'M');
	km.onclick = function () {tecla(this.value)} 
	km.className = "teclado";
	
	var kguion = document.createElement('input');
	kguion.setAttribute('type', 'button');
	kguion.setAttribute('value', '-');
	kguion.onclick = function () {tecla(this.value)} 
	kguion.className = "teclado";
	
	
	//Teclas especiales.
	
	kespacio = document.createElement('input');
	kespacio.type = "button";
	kespacio.value = "espacio";
	kespacio.onclick = function(){
		document.getElementById('kPantalla').value += ' ';
	}
	kespacio.className = "teclado";
	kespacio.style.width="400px";
	
	
	kok = document.createElement('input');
	kok.setAttribute("type", "button");
	kok.setAttribute("value", "Aceptar");
	kok.setAttribute("class", "tecladoWide");  
	kok.onclick = function () {
		btnProtagonista.value = document.getElementById("kPantalla").value;
		divKeyBoard.className ="divKeyBoardHidden";
		divKeyBoard.innerHTML = "";
	}

	kcancel = document.createElement('input');
	kcancel.setAttribute("type", "button");
	kcancel.setAttribute("value", "Cancelar");
	kcancel.setAttribute("id", "btnCancel");
	kcancel.setAttribute("class", "tecladoWide"); 
	kcancel.onclick = function () {tecla(this.value)}


	var br = document.createElement('br');
	var br1 = document.createElement('br');
	var br2 = document.createElement('br');
	var br3 = document.createElement('br');
	var br4 = document.createElement('br');
	var br5 = document.createElement('br');
	
    var divInterior = document.createElement('div');
	
	divInterior.className ="divKeyBoard";

  
    divInterior.appendChild(kPantalla);
	divInterior.appendChild(kLimpiar);
    divInterior.appendChild(br);
    divInterior.appendChild(k1);
    divInterior.appendChild(k2);
    divInterior.appendChild(k3);
    divInterior.appendChild(k4);
    divInterior.appendChild(k5);
    divInterior.appendChild(k6);
    divInterior.appendChild(k7);
    divInterior.appendChild(k8);
    divInterior.appendChild(k9);
    divInterior.appendChild(k0);
    divInterior.appendChild(kdelete);
    divInterior.appendChild(br1);     ///Salto de linea
    divInterior.appendChild(kq);
    divInterior.appendChild(kw);
    divInterior.appendChild(ke);
    divInterior.appendChild(kr);
	divInterior.appendChild(kt);
	divInterior.appendChild(ky);
	divInterior.appendChild(ku);
	divInterior.appendChild(ki);
	divInterior.appendChild(ko);
	divInterior.appendChild(kp);
	divInterior.appendChild(br2);   //Salto de linea
	
	divInterior.appendChild(ka);
	divInterior.appendChild(ks);
	divInterior.appendChild(kd);
	divInterior.appendChild(kf);
	divInterior.appendChild(kg);
	divInterior.appendChild(kh);
	divInterior.appendChild(kj);
	divInterior.appendChild(kk);
	divInterior.appendChild(kl);
	divInterior.appendChild(br3);   //Salto de linea
	divInterior.appendChild(kz);
	divInterior.appendChild(kx);
	divInterior.appendChild(kc);
	divInterior.appendChild(kv);
	divInterior.appendChild(kb);
	divInterior.appendChild(kn);
	divInterior.appendChild(km); 
	divInterior.appendChild(kguion); 
	divInterior.appendChild(br4);   //Salto de linea
	divInterior.appendChild(kespacio);
	divInterior.appendChild(br5);
	
	divInterior.appendChild(kok);
    divInterior.appendChild(kcancel);
	

    divKeyBoard.appendChild(divInterior); 					// - put the table into the div
	
	
	
	//divKeyBoard.style.left=data[0]/2+data[2]-parseInt(divKeyBoard.style.width)/2+'px';
	divKeyBoard.style.left='200px';
	divKeyBoard.style.top=((data[1]/2+data[3])-(divKeyBoard.style.height)-300)+'px';
	document.getElementById("kPantalla").focus();
}

function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth;
        heightViewport= window.innerHeight;
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
        widthViewport=document.documentElement.clientWidth;
        heightViewport=document.documentElement.clientHeight;
    }else{
        widthViewport= document.getElementsByTagName('body')[0].clientWidth;
        heightViewport=document.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
function $(id){
return document.getElementById(id);
}
window.onload=window.onresize=window.onscroll=function(){
var data=getWindowData();
	divKeyBoard.style.left=data[0]/2+data[2]-parseInt(divKeyBoard.style.width)/2+'px';
	divKeyBoard.style.top=((data[1]/2+data[3])-(divKeyBoard.style.height)-200)+'px';
}

window.onload=function()
{
	var divKeyBoard;
var newdiv = document.createElement('div');
		newdiv.setAttribute('id',"KeyBoard");
		newdiv.style.position = "absolute";
		
		document.body.appendChild(newdiv);
		nv = false;	
	
}

